<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue的axios用法案例</title>
		<!-- 1.导入配置文件 -->
		<script src="../vue/vue.js"> </script>
		<script src="../vue/axios.min.js"> </script>
	</head>
	<body>
		<!-- 2.创建函数 -->
		<div id="app">
			<!-- 给按钮添加单击事件，并触发函数 -->
			<button v-on:click="init()">点我，获取数据</button>
			{{name}}欢迎你
		</div>
		
		<script>
			new Vue({
				el:"#app",//挂载点
				data:{
					name:''
				},
				methods:{//提供函数
					init(){//函数的简写形式
					//get()访问了指定的资源，a表示访问成功后，得到的数据
					axios.get('../JSON文件/1.json').then(//单独创建js文件，存入数据"name" : "jack"
						a=>{
						console.log(a);	//把获取到的结果封装成一个js对象
						console.log(a.data);//解析data属性里存放着的数据
						console.log(a.data.name);//获取name属性的值
						this.name=a.data.name;
						}
						)
					}
				}
			})
		</script>
	</body>
</html>
